<template>
  <div>
    <div v-if="false" class="loading">loading...</div>
    <recycle-scroller v-else
      class="playlist-scroller"
      :items="playlists"
      :item-size="200"
      :buffer="5"
      key-filed="id"
      v-slot="{ item }">
      <div class="playlist-row">
        <base-playlist-item class="playlist-item"
          v-for="(cell, index) of item.list" :key="index"
          :width="itemWidth + 'px'"
          :id="cell.id"
          :img="cell.coverImgUrl + '?param=100y100'"
          :playcount="cell.playCount"
          :desc="cell.description"/>
      </div>
    </recycle-scroller>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    cat: { type: String, default: '' }
  },
  data () {
    return {
      playlists: [],
      loading: true
    }
  },
  mounted () {
    console.log(this.cat)
    this.extractPlaylistByCate(this.cat)
  },
  computed: {
    itemWidth () {
      return Math.floor(414 / 3.5)
    }
  },
  methods: {
    to3ColList (playlists) {
      const ret = []
      for (let i = 0, l = playlists.length; i < l; i += 3) {
        const list = playlists.slice(i, i + 3)
        ret.push({ list, id: i })
      }
      return ret
    },
    extractPlaylistByCate (cat) {
      this.$api.getTopPlaylist({ cat, limit: 100 }).then(res => {
        this.loading = false
        const { data } = res
        this.playlists = this.to3ColList([].concat(data.playlists))
        // console.log(this.playlists)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.loading {
  text-align: center;
  font-size: 20px;
}

.playlist {
  &-scroller {
    width: 100%;
    height: 100%;
  }

  &-row {
    display: flex;
    justify-content: space-between;
  }
}
</style>
